<template>
    <div class="v-floater-panel-item">
        <!-- cbFunc only -->
        <template v-if="!keys && typeof cbFunc === 'function'">
            <p class="boolean func"></p>
            <p class="val" @click="cbFunc()">{{ label }}</p>
        </template>
        <!-- boolean -->
        <template v-else-if="currentValue === true || currentValue === false">
            <p class="boolean" :class="{ true: currentValue === true }">&nbsp;</p>
            <p class="val" @click="handleClickBoolean">{{ label }} ({{ keys }} : {{ currentValue }})</p>
        </template>
        <!-- function -->
        <template v-else-if="typeof currentValue === 'function'">
            <p class="boolean func"></p>
            <p class="val" @click="currentValue()">{{ label }}</p>
        </template>
        <!-- object -->
        <!-- <template v-else-if="currentValue === Object(currentValue) && typeof currentValue !== 'function'"> -->
        <template v-else-if="currentValue === Object(currentValue)">
            <!-- <template v-if="keys.indexOf('.') >= 0"> -->
            <v-floater-panel-item
                :label="label"
                :keys="getKeys(keys)"
                v-model="currentValue[getKeys(keys, true)]"
                :format="format"
                :color="color"
                :slider="slider"
            ></v-floater-panel-item>
        </template>
        <!-- color -->
        <!-- <template v-else-if="keys.toLowerCase().indexOf('color') >= 0"> -->
        <template v-else-if="color">
            <p class="boolean clr"></p>
            <p class="val">{{ label }}:&nbsp;</p>
            <input type="text" v-model.number="currentValue" />
            <el-color-picker v-model="currentValue" show-alpha></el-color-picker>
        </template>
        <!-- slider -->
        <template v-else-if="slider">
            <p class="boolean slider"></p>
            <p class="val">{{ label }}:&nbsp;</p>
            <el-slider v-model="currentValue" :min="slider.min" :max="slider.max" :step="slider.step"></el-slider>
        </template>
        <!-- number -->
        <template v-else-if="currentValue === currentValue + 0">
            <p class="boolean num"></p>
            <p class="val">{{ label }}:&nbsp;</p>
            <input type="number" v-model.number="currentValue" />
        </template>
        <!-- string -->
        <template v-else-if="currentValue === currentValue + ''">
            <p class="boolean str"></p>
            <p class="val">{{ label }}:&nbsp;</p>
            <input type="text" v-model="currentValue" />
        </template>
    </div>
</template>

<script>
import vFloaterPanelItem from './v-floater-panel-item.vue';

export default {
    name: 'v-floater-panel-item',
    components: { vFloaterPanelItem }, //eslint-disable-line
    props: {
        label: String,
        keys: String,
        color: {
            // eslint-disable-next-line vue/require-prop-type-constructor
            type: [Boolean, Object],
            default: false
        },
        slider: Object,
        value: {
            // eslint-disable-next-line vue/require-prop-type-constructor
            type: [String, Number, Function, Boolean, Object],
            default: ''
        },
        format: Object,
        cbFunc: Function
    },
    data() {
        return {
            currentValue: this.value,
            currentSettings: this.settings,
            colorDisplay: false
        };
    },
    computed: {},
    watch: {
        value: {
            handler(val) {
                this.currentValue = val;
            },
            immediate: true,
            deep: true
        },
        currentValue: {
            handler(val) {
                this.$emit('input', val);
            },
            immediate: true,
            deep: true
        }
    },
    created() {},
    beforeDestroy: function () {},

    mounted() {
        this.init();
    },
    methods: {
        init() {
            // console.log(`v-floater-panel-item.${this.id}.${this._uid}.init ... `, this);
        },
        getKeys(key, prefix = false) {
            // return key.split('.')[lv];
            let rtn = '',
                s = key.match(/\.(\S*)/);
            if (!s) rtn = key;
            else if (!prefix) rtn = s[1];
            else rtn = key.replace(s[0], '');
            return rtn;
        },
        handleClickBoolean() {
            this.currentValue = !this.currentValue;
            if (typeof this.cbFunc === 'function') this.cbFunc(this.currentValue);
        }
    }
};
</script>

<style lang="scss">
.v-floater-panel-item {
    position: relative;
    font-size: 10px;
    line-height: 28px;
    border-bottom: #f2f2f4 1px dotted;
    display: flex;

    p {
        margin: 0;
    }

    .val {
        margin-left: 6px;
    }
    input {
        flex: 1 1 auto;
        margin: 0 0 0 6px;
        padding: 0 6px;
        font-size: 12px;
        line-height: 1;
        background: transparent;
        border: none;
        border-bottom: #ccc 1px dotted;
    }

    .boolean {
        width: 5px;
        background-color: darkred;

        &.true {
            background: darkgreen;
        }
        &.func {
            background: darkgoldenrod;
        }
        &.obj {
            background: orange;
        }
        &.num {
            background: darkblue;
        }
        &.str {
            background: blue;
        }
        &.clr {
            background: darkmagenta;
        }
        &.slider {
            background: burlywood;
        }
    }

    .el-color-picker {
        width: 26px;
        height: 26px;
        .el-color-picker__trigger {
            width: 26px;
            height: 26px;
            padding: 0;
            border: none;
        }
    }
    .el-slider {
        flex: 1 1 auto;
        width: 160px;
        height: 28px;
        line-height: 1;
        margin: 0 0 0 6px;
        padding: 0 0 0 6px;

        .el-slider__runway {
            margin: 10px 0;
        }
    }
}
</style>
